import React from 'react'
import DataSet from "@antv/data-set"
import { Col, Radio, Row } from 'antd'
import { Axis, Chart, Geom, Legend, Tooltip } from "bizcharts"

let fields = []
for (let i = 0; i < 24; i += 1) {
  fields.push(`${i}-${i + 1}`);
}

const StatisticalDiagram = ({ dataSource, onChange }) => {
  console.log(dataSource)
  const dateTime = dataSource.map(v => (v.dateTime))
  let data = [{
    name: "boy",
  },
  {
    name: "girl",
  }]
  if(dataSource.length !=0){
     if(dataSource[0].boy != undefined){
      dateTime.forEach(v => {
        dataSource.forEach(e => {
          if (e.dateTime == v) {
            data[0][v] = e.boy
            return
          }
        })
        dataSource.forEach(e => {
          if (e.dateTime == v) {
            data[1][v] = e.girl
            return
          }
        })
      })
     }else if(dataSource[0].cardSharing != undefined){
      data = [{
        name: "activeAddition",
      },
      {
        name: "cardSharing",
      },
      {
        name: "phoneNum",
      },
      {
        name: "scan",
      },
      {
        name:"wxNo"
      }]
      dateTime.forEach(v => {
        dataSource.forEach(e => {
          if (e.dateTime == v) {
            data[0][v] = e.activeAddition
            return
          }
        })
        dataSource.forEach(e => {
          if (e.dateTime == v) {
            data[1][v] = e.cardSharing
            return
          }
        })
        dataSource.forEach(e => {
          if (e.dateTime == v) {
            data[2][v] = e.phoneNum
            return
          }
        })
        dataSource.forEach(e => {
          if (e.dateTime == v) {
            data[3][v] = e.scan
            return
          }
        })
        dataSource.forEach(e => {
          if (e.dateTime == v) {
            data[4][v] = e.wxNo
            return
          }
        })
      })
     } else if(dataSource.adAcquireMap != undefined){
      let data = [{
        name: "boy",
      },
      {
        name: "girl",
      }]
     }
  }
  

  const ds = new DataSet();
  const dv = ds.createView().source(data);

  dv.transform({
    type: "fold",
    fields: dateTime,
    // 展开字段集
    key: "时间",
    // key字段
    value: "数量" // value字段
  });
  return (
    <div>
      <Row gutter={24}>
        <Col md={7} sm={24}></Col>
        <Col md={7} sm={24}></Col>
        <Col md={10} sm={24} style={{ textAlign: "right" }}>
          <Radio.Group defaultValue="gender" onChange={onChange}>
            <Radio.Button value="gender">性别</Radio.Button>
            <Radio.Button value="addType">添加方式</Radio.Button>
            <Radio.Button value="adAcquireType">广告获客渠道</Radio.Button>
          </Radio.Group>
        </Col>
      </Row>
      <Chart height={600} data={dv} forceFit>
        <Legend />
        <Axis name="时间" />
        <Axis name="数量" />
        <Tooltip />
        <Geom
          type="intervalStack"
          position="时间*数量"
          color={'name'}
          style={{
            stroke: "#fff",
            lineWidth: 2
          }}
        />
      </Chart>
    </div>
  )

}

export default StatisticalDiagram
